<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.min.js"></script>-->
<script src="../../../node_modules/markdown-it/dist/markdown-it.js"></script>
<script src="../../../node_modules/markdown-it-attrs/markdown-it-attrs.browser.js"></script>
<div id="markdownbox"></div>
<script>
  var md = window.markdownit();


  md.use(
    window.markdownItAttrs,
    {
      // optional, these are default options
      leftDelimiter: '{',
      rightDelimiter: '}',
      allowedAttributes: []  // empty array = all attributes are allowed
    }
  )

  //1. When class can be applied to both inline or block element, inline element will take precedence:
  const text1 =
`- list item **bold**{.red}`;
/* 输出为:
<ul>
  <li>list item <strong class="red">bold</strong></li>
<ul>
*/

  //2. If you need the class to apply to the list item instead, use a space:
  const text2 =
`- list item **bold** {.red}`;
/* 输出为:
<ul>
<li class="red">list item <strong>bold</strong></li>
</ul>
*/

  //3. If you need the class to apply to the <ul> element, use a new line:
  const text3 =
`- list item **bold**
{.red}`;
/* 输出为:
<ul class="red">
<li>list item <strong>bold</strong></li>
</ul>
*/

  //4. If you have nested lists, curlys after new lines will apply to the nearest <ul> or <ol>. You may force it to apply to the outer <ul> by adding curly below on a paragraph by its own:
  //如果您有嵌套列表，新行后的 curly 将应用于最近的 <ul> 或 <ol>。 您可以通过在段落下方添加 curly 来强制它应用于外部 <ul> ：
  const text4 =
`- item
  - nested item {.a}
{.b}

{.c}}`;
  /* 输出为:
<ul class="c">
  <li>item
    <ul class="b">
      <li class="a">nested item</li>
    </ul>
  </li>
</ul>*/
  //↑todo This is not optimal, but what I can do at the momemnt. For further discussion, see https://github.com/arve0/markdown-it-attrs/issues/32.
  //optimal ---> 最优的

  //todo If you need finer control, decorate might help you.
  //+ https://github.com/rstacruz/markdown-it-decorate

  // Similar for tables, attributes must be two new lines below:
  const text5 =
`header1 | header2
------- | -------
column1 | column2

{.special}
`;
/* 输出为
<table class="special">
  <thead>
    <tr>
      <th>header1</th>
      <th>header2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>column1</td>
      <td>column2</td>
    </tr>
  </tbody>
</table>
*/


  var result = md.render(text5);

  console.log('result:',result);
  markdownbox.innerHTML = result;
</script>
</body>
</html>
